<template>
  <view class="question-difficulty" :class="difficultyClass">
    <view class="difficulty-text">{{ difficultyText }}</view>
  </view>
</template>

<script>
export default {
  name: 'DifficultyTag',
  props: {
    // 难度等级，支持数字和文本形式
    difficulty: {
      type: [String, Number],
      default: '中等'
    }
  },
  computed: {
    // 根据难度等级计算显示文本
    difficultyText() {
      console.log(typeof this.difficulty === 'string' && !isNaN(Number(this.difficulty)),'nandurucan',this.difficulty)
      // 如果传入的是数字形式的难度等级
      if (typeof typeof this.difficulty === 'string' && !isNaN(Number(this.difficulty))) {
        switch (this.difficulty) {
          case '1':
            return '简单';
          case '2':
            return '简单';
          case '3':
            return '中等';
          case '4':
            return '中等';
          case '5':
            return '困难';
          default:
            return '中等';
        }
      }
      
      // 如果传入的是文本形式的难度等级
      return this.difficulty || '中等';
    },
    
    // 根据难度等级计算样式类名
    difficultyClass() {
      const text = this.difficultyText;
      switch (text) {
        case '简单':
          return 'difficulty-easy';
        case '中等':
          return 'difficulty-medium';
        case '困难':
          return 'difficulty-hard';
        default:
          return 'difficulty-easy';
      }
    }
  }
}
</script>

<style scoped>
.question-difficulty {
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  height: 30rpx;
  text-align: center;
}

.difficulty-easy {
  background-color: var(--question-difficulty-easy-bg);
}

.difficulty-medium {
  background-color: var(--question-difficulty-medium-bg);
}

.difficulty-hard {
  background-color: var(--question-difficulty-hard-bg);
}

.difficulty-text {
  font-size: 24rpx;
}

.difficulty-easy .difficulty-text {
  color: var(--question-difficulty-easy-text);
}

.difficulty-medium .difficulty-text {
  color: var(--question-difficulty-medium-text);
}

.difficulty-hard .difficulty-text {
  color: var(--question-difficulty-hard-text);
}
</style>